<template>
  <div class="face">
    <div class="icon_group">
      <div v-for="key in title_msg">
        <img :src="key.url">
        <p class="desc">{{key.name}}</p>
      </div>
    </div>
    <div class="camera_group">
      <div class="icon_top">
        <span class="left_icon"></span>
        <span class="right_icon"></span>
      </div>
      <div class="preview">
        <img class="preview_img" :src="avatar" />
      </div>
      <div class="start_camera">
        <UploadPic class="upload_pic" @receiveImg="show_photo"></UploadPic>
      </div>
    </div>
    <div class="bottom_group">
      <p class="bottom_desc">请确保此过程由您本人完成 信息将仅用于身份核实</p>
      <button type="button" name="" class="w_submit" disabled="false" @click="submit">提交并打开车门</button>
    </div>
    <!-- <File></File> -->
  </div>
</template>
<script type="text/babel">
  import File from "../components/file"
  import UploadPic from "../components/UploadPic"
  import qs from 'qs'
  export default{
    name: 'face',
    components: {
      File,
      UploadPic
    },
    data () {
      return {
        title_msg:[
        {url:"../../static/image/1-17/icon_light.png",name:"光线明亮"},
        {url:"../../static/image/1-17/icon_face.png",name:"正对手机"},
        ],
        avatar:"../../static/image/1-17/img_facescan.png"
      }
    },
    mounted:function(){

    },
    methods:{
      show_photo(url){
        this.avatar = url
        document.querySelector(".w_submit").removeAttribute("disabled")
        console.log(url,"show_url")
      },
      submit(){
        console.log(this.avatar)
        this.axios.post('user/userfaceRecognition.json', qs.stringify({
            facePath: this.avatar,
        }))
        .then(function (res) {
          if (res.data.code == 200) {
            this.$router.push({path:'WaitUse',query:{type:1}})
          }else{
            alert(res.data.desc)
          }
        })
      }
    }
  }

</script>

<style scoped>
  .face{
    height:100%;
    background-image: linear-gradient(-180deg, #FFFFFF 20%, rgba(243,255,249,0.50) 42%, rgba(199,255,226,0.18) 57%, rgba(255,255,255,0.92) 97%);
    overflow: hidden;
  }
  .icon_group{
    display: flex;
    justify-content: space-evenly;
    margin-top:64px;
  }
  .icon_group img{
    width:80px;
    height:86px;
    display: block;
  }
  .desc{
    font-size: 22px;
    color: #AAAAAA;
    margin-top:10px;
  }
  div.camera_group{
    margin-top:120px;
    background: #FFFFFF;
    border: 6px solid #FFFFFF;
    box-shadow: 0 0 44px 0 #E2EEF8;
    border-radius: 32px;
    width:530px;
    height:700px;
    margin:120px auto 0;
    position: relative;
  }
  span.left_icon{
    width:20px;height:20px;
    /*background:red;*/
    background:#F1FAF6;
    position: absolute;
    top:27px;
    left:50%;
    margin-left: -80px;
    border-radius: 50%;
  }
  span.right_icon{
    width:106px;height:14px;
    /*background:red;*/
    background:#F1FAF6;
    position: absolute;
    top:30px;
    left:50%;
    margin-left: -33px;
  }
  div.preview{
    position: relative;
    margin:78px auto 0;
    width:478px;
    height:438px;
    overflow: hidden;
  }
  img.preview_img{
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    min-width:478px;
    min-height:438px;
  }
  /*.upload-pic.start_camera{*/
  .start_camera{
    width:478px;
    height:100px;
    line-height: 100px;
    background:#0DB95F;
    border-radius: 50px;
    margin:40px auto;
  }
  .start_camera .upload_pic{
    width:100%;
    height:100%;
  }
  /*.start_camera .upload_pic input{
    border:none;
  }*/
  .bottom_group{
    position: fixed;
    left:0;right:0;
    bottom:0;
  }
  .bottom_desc{
    font-size: 24px;
    color: #B4B4B4;
    text-align: center;
  }
  .w_submit{
    position:relative;
    font-size: 32px;
    border-radius: 50px;
    width:690px;
    height: 100px;line-height: 100px;
    margin:30px auto;
    display: block;
    text-align: center;
    padding-right:34px;
  }
  .w_submit:after{
    content:" ";
    width:15px;
    height:25px;
    display: block;
    background:url("../../static/image/icon_next.png") no-repeat;
    background-size: cover;
    position: absolute;
    top:50%;
    margin-top:-12.5px;
    right:215px;
    z-index: 99999;
    /*background:red;*/
  }
</style>
